<template>
  <div class="root">
    <!-- 子传父：自定义事件 -->
    <!-- <Navbar @toNavbarEvent="handEvent"></Navbar> -->

    <!-- 插槽方式 -->
    <Navbar>
      <button @click="isShow = !isShow">展开/折叠侧边栏</button>
    </Navbar>
    <!-- 父传子：自定义属性 -->
    <Layout class="layout" :myShow="isShow"></Layout>
  </div>
</template>
<script>
import Navbar from './components/Navbar.vue'
import Layout from './components/Layout.vue'

export default {
  components: {
    Navbar,
    Layout
  },
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    // handEvent(data) {
    //   console.log('展开或者折叠');
    //   this.isShow = !this.isShow
    // }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.root {
  display: flex;
  height: 100vh;
  /* 改变主轴方向为竖直方向，竖直排列 */
  flex-direction: column;
}

.layout {
  /* layout占满剩余部分 */
  flex: 1;
  display: flex;
}
</style>